<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>10秒挑战</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css"/>


</head>
<body>
    <div class="wrapper" id="app">
        <div v-show="showPrize==0">
            <!--规则-->
            <div class="link-rule" v-on:click="showRule">
                <img src="assets/images/link-rule.png"/>
            </div>
            <!--奖品-->
            <div class="link-prize" v-on:click="myPrize">
                <img src="assets/images/link-prize.png"/>
            </div>

            <!-- logo -->
            <div class="logo">
                <img src="assets/images/logo.png"/>
            </div>

            <!-- sum rest -->
            <div class="sum-rest">
                <img src="assets/images/badge-rest.png"/>
                <span class="sum-rest-info">{{ sumString }}</span>
            </div>

            <!-- clock -->
            <div class="clock" v-bind:class="{ animation:isAnimate }">
                <img class="clock-bg" src="assets/images/clock.png"/>
                <img class="clock-h" src="assets/images/clock-hour.png"/>
                <img class="clock-m" src="assets/images/clock-minute.png"/>
                <img class="clock-s" src="assets/images/clock-second.png"/>
                <img class="clock-p" src="assets/images/clock-point.png"/>
            </div>

            <!-- challenge rest -->
            <div class="challenge-rest">
                当日剩余挑战<span class="challenge-rest-info">{{ restTimes }}</span>次
            </div>

            <!-- 报名区 -->
            <div class="btns">
                <!-- 一键报名 -->
                <img v-bind:class="{show:step==1}" v-on:click="signUp"  src="assets/images/btn-signup.png"/>
                <!-- 开始计时 -->
                <img v-bind:class="{show:step==2}" v-on:click="start" src="assets/images/btn-start.png"/>
                <!-- 结束计时 -->
                <img v-bind:class="{show:step==3}" v-on:click="end" src="assets/images/btn-end.png"  />
            </div>

            <!-- 链接 更多流量 -->
            <div class="link-more" v-on:click="moreFlow">
                <a>
                    <img src="assets/images/link-more.png"/>
                </a>
            </div>

            <!-- 链接 分享 -->
            <div class="link-share" v-on:click="share">
                <img src="assets/images/link-share.png"/>
            </div>
        </div>

        <!-- 我的奖品 -->
        <div class="prize-wrapper" v-bind:class="{show:showPrize}">
            <!-- logo -->
            <div class="logo">
                <img src="assets/images/logo.png"/>
            </div>

            <div class="prize-container">
                <img src="assets/images/prize-bg.png"/>
                <div class="prize-content">
                    <img src="assets/images/prize-bg-yellow.png"/>
                    <div class="prize-infos">
                        <div v-if="flowCount">
                            <div class="h2">{{ flowCount }}M省内流量</div>
                            <div>次月10号前赠送</div>
                        </div>
                        <div class="h2" v-else="">
                            暂无奖品记录
                        </div>
                    </div>
                </div>

            </div>

            <!-- 按钮 -->
            <div class="btns" v-on:click="showPrize=false">
                <!-- 返回 -->
                <img v-bind:class="{show:showPrize}" src="assets/images/btn-back.png"/>
            </div>

        </div>

        <!-- 弹出层 -->
        <div class="backpop" v-bind:class="{hide:!popShow}"></div>

        <!-- 引导页 -->
        <div class="help-page" v-if="isFirst">
            <div class="help-infos">
                <div class="help-detail">
                    <span v-bind:class="{show:helpFlag == 1}">点击“一键报名”</span>
                    <span v-bind:class="{show:helpFlag == 2}" >点击“开始计时”</span>
                    <span v-bind:class="{show:helpFlag >2}" >心中默念10秒，点击“结束计时”</span>
                </div>
                <div class="hellp-arrow">
                    <img src="assets/images/hellp-arrow.png"/>
                </div>
                <div class="help-next" v-on:click="helpFlag += 1">
                    <img  v-bind:class="{show:helpFlag >2 }" v-on:click="isSignUp" class="help-know" src="assets/images/help-know.png" />
                    <img v-bind:class="{show:helpFlag < 3}" src="assets/images/help-next.png" />
                </div>
            </div>


            <div class="btns">
                <!-- 一键报名 -->
                <img v-bind:class="{show:helpFlag == 1}"  src="assets/images/btn-signup.png"/>
                <!-- 开始计时 -->
                <img v-bind:class="{show:helpFlag == 2}" src="assets/images/btn-start.png"/>
                <!-- 结束计时 -->
                <img v-bind:class="{show:helpFlag >2}" src="assets/images/btn-end.png"/>
            </div>

        </div>

        <!-- 挑战提示 -->
        <div class="pop-notice" v-bind:class="{ show:noticeShow }">
            <img src="assets/images/pop-bg.png"/>
            <!-- 成功 -->
            <div v-if="successFlag==1" class="notice-contianer">
                <div v-bind:class="{show:noGet==1}" class="success-note">
                    <div class="h2">恭喜您挑战成功!</div>
                    <div>获得200M省内流量</div>
                    <div class="text-mute">(次月赠送，48小时内有效)</div>
                    <div class="pop-btn" v-on:click="hideNotice"><img src="assets/images/btn-know.png"></div>
                </div>
                <div v-bind:class="{show:noGet==0}" class="success-note">
                    <div class="h2">恭喜您挑战成功!</div>
                    <div >本月您已领过奖了</div>
                    <div class="text-mute">每月限领一次流量奖励</div>
                    <div class="pop-btn" v-on:click="hideNotice"><img src="assets/images/btn-know.png"></div>
                </div>

            </div>

            <!-- 失败 -->
            <div  v-else-if="successFlag==0"  class="notice-contianer">
                <div class="h2">默念时间{{time}}秒</div>
                <div>很遗憾，挑战失败！</div>
                <div class="h3">还有机会，再接再厉呦！</div>
                <div class="pop-btn fail-btn" v-on:click="oneMore"><img src="assets/images/btn-onemore.png"></div>
            </div>

            <!-- 机会用光 -->
            <div v-show="isNoChance" class="notice-contianer">
                <div class="h2">今天的机会用光啦！</div>
                <div class="h3">明天再来吧！</div>
                <div class="pop-btn" v-on:click="hideNotice"><img src="assets/images/btn-know.png"></div>
            </div>

            <!-- 过期 -->
            <div v-show="isOverFlag || nullFlag" class="notice-contianer">
                <div class="h3" v-html="overMsg"></div>
                <div class="pop-btn" v-on:click="hideNotice"><img src="assets/images/btn-know.png"></div>
            </div>

        </div>

        <!-- 活动规则 -->
        <div class="rule-container" v-bind:class="{show:showRuleFlag}">
            <div class="close-btn" v-on:click="closeRule">
                <img src="assets/images/close.png"/>
            </div>
            <div class="pop-rule">
                <img class="pop-logo" src="assets/images/logo.png"/>
                <img class="rule-header" src="assets/images/rule-title.png">
                <ul class="rule-content">
                    <li v-for="rule in ruleList" >
                        <div class="rule-title">{{rule.title}}</div>
                        <div v-for="rulebody in rule.ruleBodies ">{{rulebody.body}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<script src="assets/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<script src="js/challengeTimer.js"></script>
</body>
</html>